<template>
  <div>
    <div class="container">
      <div class="tableWraper">
        <div class="money">
          <table class="all_tb" cellspacing="10">
            <tr>
              <th>总实际到账金额</th>
              <th>总提现金额</th>
            </tr>
            <tr>
              <td>{{ allShiji }}</td>
              <td>0</td>
            </tr>
          </table>
        </div>
        <div class="seachmsg">
          <table class="all_tb1">
            <tr>
              <th>
                姓名：<input
                  class="inputbox"
                  placeholder="姓名查询"
                  v-model="xmcx"
                />
              </th>
              <th class="clock">
                申请日期:
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </th>
            </tr>
          </table>
        </div>
      </div>
      <div class="msgtable">
        <div class="btns">
          <el-button plain>全部（0）</el-button>
          <el-button plain>提现申请（0）</el-button>
          <el-button plain>提现中（0）</el-button>
          <el-button plain>提现成功（0）</el-button>
          <el-button plain>提现失败（0）</el-button>
        </div>
        <!-- <div class="sendmethod">
          <p>发款方式:</p>
          <div class="checks">
            <el-radio v-model="radio" label="1">全部</el-radio>
            <el-radio v-model="radio" label="2">个人</el-radio>
            <el-radio v-model="radio" label="3">公司</el-radio>
          </div>
        </div> -->
        <!-- <div class="getmethod">
          <p>提现方式:</p>
          <div class="checks1">
            <el-radio v-model="radio1" label="1">全部</el-radio>
            <el-radio v-model="radio1" label="2">普通提现</el-radio>
            <el-radio v-model="radio1" label="3">管理津贴提现</el-radio>
          </div>
        </div> -->
        <div class="export-data">
          <el-button type="primary" @click="excelDate" class="daochu"
            >导出数据到Excel</el-button
          >
          <el-button type="primary" @click="fn1(xmcx)">
            <i class="el-icon-search"></i> 查询</el-button
          >
          <!-- numberValidateForm -->
          <el-button @click="resetForm()">
            <i class="el-icon-refresh-right"></i> 重置</el-button
          >
        </div>
      </div>
    </div>

    <!-- 提现列表表格 -->
    <div class="data">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%" max-height="400">
        <el-table-column fixed prop="id" label="ID" width="80" align="center">
          <!-- <template slot-scope="scope">{{scope.row.id}}</template> -->
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="90" align="center">
          <!-- <template slot-scope="scope">{{scope.row.name}}</template> -->
        </el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="getmoney"
          label="提现金额"
          width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="actualget"
          label="实际到账"
          width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="bandcard"
          label="银行卡"
          width="170"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="gettime"
          label="申请提现时间"
          width="210"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="whyerror"
          label="失败原因"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="option"
          label="操作"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              class="edit"
              type="primary"
              @click="dialogFormVisible2 = true"
              >编辑</el-button
            >
            <el-button
              type="danger"
              @click="remove(scope.$index, scope.row)"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑弹框 -->
      <div class="container_tank">
        <el-dialog title="编辑提现列表" :visible.sync="dialogFormVisible2">
          <div class="container_x2"></div>
          <el-form :model="form">
            <el-form-item label="身份证：" :label-width="formLabelWidth">
              <el-input
                v-model="form.name1"
                autocomplete="off"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：" :label-width="formLabelWidth">
              <el-input
                v-model="form.name2"
                autocomplete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="实际到账：" :label-width="formLabelWidth">
              <el-input
                v-model="form.name3"
                autocomplete="off"
                placeholder="1至50个字符之间"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行卡：" :label-width="formLabelWidth">
              <el-input
                v-model="form.name4"
                autocomplete="off"
                placeholder="请输入会员卡号"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible2 = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- 分页条 -->
      <div class="container_fy">
        <el-pagination
          :page-size="4"
          :current-page.sync="currentPage"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total="total"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { apiGetWithdrawStatus, apiGetUsers } from "../../api/manifest";

export default {
  data() {
    return {
      // 获取时间戳
      dateParams: {
        startTime: "",
        endTime: "",
      },

      // num:0,
      allshiji: 0,
      alltixian: 0,

      shujunum: "",
      radio: "1", //发款方式
      radio1: "1", //提现方式
      tableData: [
        {
          id: "",
          name: "",
          idcard: "",
          phone: "",
          getmoney: "",
          actualget: "",
          bandcard: "",
          gettime: "",
          status: "",
          whyerror: "",
        },
      ],
      value2: "",

      xmcx: "", //输入框数据绑定

      // 添加权限、编辑
      dialogFormVisible: false,
      dialogFormVisible2: false, //编辑
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      // 分页
      total: 0,
      pageSize: 4,
      currentPage: 1,
    };
  },
  created() {
    this.fn2();
  },
  methods: {
    //触发按钮点击下载事件
    excelDate() {
      this.excelData = this.tableData; //将你要导出的数组数据（historyList）赋值给excelDate
      this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "ID",
          "姓名",
          "身份证",
          "手机号",
          "提现金额",
          "实际到账",
          "银行卡",
          "申请提现时间",
          "状态",
          "失败原因",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "id",
          "name",
          "idcard",
          "phone",
          "getmoney",
          "actualget",
          "bandcard",
          "gettime",
          "status",
          "whyerror",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "提现列表数据表"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    // 过滤对象
    filterObj(val) {
      var arr = Object.values(val).filter(function (item) {
        if (item !== "") {
          return true; //过滤掉为空的项
        }
      });
      return arr;
    },

    // 默认获取所有数据
    fn2() {
      apiGetWithdrawStatus({}).then((res) => {
        console.log(res);
        console.log(res.tarArr);

        this.tableData = res.tarArr;

        this.total=res.tarArr.length

        this.shujunum = res.tarArr.length;

        // 修改时间格式
        res.tarArr.forEach((item) => {
          item.getDate = this.dayjs(item.getDate).format("YYYY-MM-DD HH:mm:ss");
        });

        // 遍历获取到的数据
        for (let i = 0; i < res.tarArr.length; i++) {
          this.tableData[i].id = i;
          this.tableData[i].name = res.tarArr[i].name;
          this.tableData[i].idcard = res.tarArr[i].idcard;
          this.tableData[i].phone = res.tarArr[i].phone;
          this.tableData[i].getmoney = res.tarArr[i].cash;
          this.tableData[i].actualget = res.tarArr[i].getCash;
          this.tableData[i].bandcard = res.tarArr[i].bankCard;
          this.tableData[i].gettime = res.tarArr[i].getDate;
          this.tableData[i].status = "成功";
          this.tableData[i].whyerror = "不清楚";
        }

        // this.tableData.forEach(item=>{
        //  item.gettime= this.dayjs(item.gettime).format("YYYY-MM-DD HH:mm:ss")
        // })
      });
    },

    // 点击姓名查询
    fn1(val) {
      // console.log(val);
      let obj = {
        name: val,
      };
      // 判断输入框是否有值
      if (!val) {
        //  提示弹框
        this.$message({ message: "请输入用户名", type: "info" });
      } else {
        apiGetWithdrawStatus(obj).then((res) => {
          console.log(res);
          this.tableData = res.tarArr;

          this.total = res.tarArr.length;

          // 遍历获取到的数据
          for (let i = 0; i < res.tarArr.length; i++) {
            this.tableData[i].id = i;
            this.tableData[i].name = res.tarArr[i].name;
            this.tableData[i].idcard = res.tarArr[i].idcard;
            this.tableData[i].phone = res.tarArr[i].phone;
            this.tableData[i].getmoney = res.tarArr[i].cash;
            this.tableData[i].actualget = res.tarArr[i].getCash;
            this.tableData[i].bandcard = res.tarArr[i].bankCard;
            this.tableData[i].gettime = res.tarArr[i].getDate;
            this.tableData[i].status = "成功";
            this.tableData[i].whyerror = "不清楚";
          }
          this.$message({ message: "查询成功", type: "success" });
        });
      }
    },

    // 点击重置
    resetForm() {
      apiGetWithdrawStatus({}).then((res) => {
        console.log(res);

        this.tableData = res.tarArr;

        this.total = res.tarArr.length;

        // 遍历获取到的数据
        for (let i = 0; i < res.tarArr.length; i++) {
          this.tableData[i].id = i;
          this.tableData[i].name = res.tarArr[i].name;
          this.tableData[i].idcard = res.tarArr[i].idcard;
          this.tableData[i].phone = res.tarArr[i].phone;
          this.tableData[i].getmoney = res.tarArr[i].cash;
          this.tableData[i].actualget = res.tarArr[i].getCash;
          this.tableData[i].bandcard = res.tarArr[i].bankCard;
          this.tableData[i].gettime = res.tarArr[i].getDate;
          this.tableData[i].status = "成功";
          this.tableData[i].whyerror = "不清楚";
        }
      });
    },

    // 分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
    sizeChange(val) {
      this.pageSize = val;
    },

    // 删除表格行数据
    remove(index, row) {
      console.log(index, row);
      this.$confirm(`确定删除id为${row.id}的数据吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        this.tableData.splice(index, 1);
      });
    },
  },

  computed: {
    // 总实际金额
    allShiji() {
      let num = 0;
      this.tableData.forEach((item) => {
        num += item.actualget;
      });
      // console.log(num);
      return (this.allshiji = num);
    },

    // 总提现金额
    allTixian() {
      let num = 0;
      this.tableData.forEach((item) => {
        num += item.getmoney;
      });
      console.log(num);
      return (this.alltixian = num);
    },
  },

  watch: {
    value2() {
      this.value2.forEach((element) => {
        element = new Date(
          this.dayjs(element).format("YYYY-MM-DD HH:mm:ss")
        ).getTime();
      });
      //获取日期
      this.value2[0] = new Date(
        this.dayjs(this.value2[0]).format("YYYY-MM-DD HH:mm:ss")
      ).getTime();
      this.value2[1] = new Date(
        this.dayjs(this.value2[1]).format("YYYY-MM-DD HH:mm:ss")
      ).getTime();
      this.dateParams.startTime = this.value2[0];
      this.dateParams.endTime = this.value2[1];

      console.log(this.dateParams);

      apiGetWithdrawStatus({
        startTime: this.dateParams.startTime,
        endTime: this.dateParams.endTime,
      }).then((res) => {
        console.log(res);
        this.tableData = res.tarArr;

        this.total = res.tarArr.length;

        // 遍历获取到的数据
        for (let i = 0; i < res.tarArr.length; i++) {
          this.tableData[i].id = i;
          this.tableData[i].name = res.tarArr[i].name;
          this.tableData[i].idcard = res.tarArr[i].idcard;
          this.tableData[i].phone = res.tarArr[i].phone;
          this.tableData[i].getmoney = res.tarArr[i].cash;
          this.tableData[i].actualget = res.tarArr[i].getCash;
          this.tableData[i].bandcard = res.tarArr[i].bankCard;
          this.tableData[i].gettime = res.tarArr[i].getDate;
          this.tableData[i].status = "成功";
          this.tableData[i].whyerror = "不清楚";
        }
      });
    },
  },
};
</script>

<style scoped>
@import "../../style/css/ManifestList.css";
</style>